<!-- 
    * 整体的ui容器，被分为标题部分和主体部分，主体部分由flex布局分为左、中、右三个子容器
 -->

<template>
  <dv-border-box1>

  <div class="ui">

    <div class="top">
      <top/>
    </div>

    <div class="mainBody">
      <div class="left"><left></left></div>
      <div class="center"><center></center></div>
      <div class="right"><right></right></div>
    </div>

  </div>

  </dv-border-box1>

</template>

<script setup lang='ts'>
import center from "./centerContainer/index.vue"
import right from "./rightContainer/index.vue";
import top from "./topContainer/index.vue";
import left from "./leftContainer/index.vue"
</script>

<style lang="scss" scoped>
.ui {
  width: 100%;
  height: 100%;
  padding:20px;
  display: flex;
  overflow: hidden;
  flex-direction: column;
  box-sizing: border-box;

  .mainBody {
    flex: 1;
    gap: 24px;
    width: 100%;
    display: flex;
    overflow: hidden;
    .left, .right {
      flex: 3;
      overflow: hidden;
    }

    .center {
      flex: 10;
      overflow: hidden;
    }
  }
}

</style>